How to Identify Performance Bottlenecks with Cloudflare’s GraphQL Datasets

%%{init: {
  'theme': 'dark',
  'themeVariables': {
    'primaryColor': '#ff9800',
    'primaryTextColor': '#fff',
    'primaryBorderColor': '#fff',
    'lineColor': '#fff',
    'secondaryColor': '#006064',
    'tertiaryColor': '#4caf50',
    'mainBkg': '#2d3436',
    'nodeBorder': '#ff9800',
    'clusterBkg': '#2d3436',
    'clusterBorder': '#ff9800',
    'fontSize': '20px'
  },
  'flowchart': {
    'nodeSpacing': 50,
    'rankSpacing': 100,
    'curve': 'basis'
  }
}}%%
graph TB
    Collect[Collect Metrics] --> Analyze{Analysis}
    Analyze --> Edge[Edge Analysis]
    Analyze --> Origin[Origin Analysis]
    Analyze --> Cache[Cache Analysis]
    Edge --> TTFB[Edge TTFB]
    Edge --> Geo[Geographic Distribution]
    Edge --> Errors[Error Rates]
    Origin --> Geo[Geographic Distribution]
    Origin --> Errors[Error Rates]
    Origin --> Response[Origin Response Time]
    Cache --> HitRatio[Hit Ratio]
    TTFB --> Issues{Issues}
    Geo --> Issues
    Response --> Issues
    Errors --> Issues
    HitRatio --> Issues

    classDef orange fill:#ff9800,stroke:#fff,stroke-width:4px,color:#fff;
    classDef blue fill:#006064,stroke:#fff,stroke-width:4px,color:#fff;
    classDef green fill:#4caf50,stroke:#fff,stroke-width:4px,color:#fff;

    class Collect,Analyze orange;
    class Edge,Origin,Cache blue;
    class TTFB,Geo,Response,Errors,HitRatio,Efficiency green;
    class Issues orange;

%%{init: {
  'theme': 'dark',
  'themeVariables': {
    'primaryColor': '#ff9800',
    'primaryTextColor': '#fff',
    'primaryBorderColor': '#fff',
    'lineColor': '#fff',
    'secondaryColor': '#006064',
    'tertiaryColor': '#4caf50',
    'mainBkg': '#2d3436',
    'nodeBorder': '#ff9800',
    'actorBorder': '#ff9800',
    'actorBackground': '#ff9800',
    'actorTextColor': '#fff',
    'noteBorderColor': '#006064',
    'noteTextColor': '#fff',
    'noteBackground': '#006064'
  }
}}%%
sequenceDiagram
    participant User
    participant Edge
    participant Cache
    participant Origin
    
    User->>Edge: Request
    Edge->>Cache: Check Cache
    alt Cache Hit
        Cache-->>Edge: Serve from Cache
        Edge-->>User: Fast Response
        Note over Edge,User: Typical: <50ms
    else Cache Miss
        Cache-->>Edge: Not Found
        Edge->>Origin: Forward Request
        Note over Origin: Process Request
        Origin-->>Edge: Response
        Edge->>Cache: Store in Cache
        Edge-->>User: Slower Response
        Note over Edge,User: Typical: >100ms
    end

%%{init: {
  'theme': 'dark',
  'themeVariables': {
    'primaryColor': '#ff9800',
    'primaryTextColor': '#fff',
    'primaryBorderColor': '#fff',
    'lineColor': '#fff',
    'secondaryColor': '#006064',
    'tertiaryColor': '#4caf50',
    'mainBkg': '#2d3436',
    'nodeBorder': '#ff9800',
    'clusterBkg': '#2d3436',
    'clusterBorder': '#ff9800'
  }
}}%%
graph TB
    A[Geographic Analysis] --> B{Performance Metrics}
    B --> C[Response Times]
    B --> D[Cache Performance]
    B --> E[Error Rates]
    C --> F[Regional TTFB]
    C --> G[Origin Latency]
    D --> H[Regional Cache Hits]
    D --> I[Bandwidth Usage]
    E --> J[Error Distribution]
    E --> K[Timeout Patterns]
    F --> L{Action Items}
    G --> L
    H --> L
    I --> L
    J --> L
    K --> L
    L --> M[Build Observability]
    L --> N[Origin Placement]
    L --> O[Cache Rules]
    L --> P[Error Handling]

    classDef orange fill:#ff9800,stroke:#fff,stroke-width:2px,color:#fff;
    classDef blue fill:#006064,stroke:#fff,stroke-width:2px,color:#fff;
    classDef green fill:#4caf50,stroke:#fff,stroke-width:2px,color:#fff;

    class A,B,L orange;
    class C,D,E blue;
    class F,G,H,I,J,K,M,N,O,P green;